<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <App></App>
  </div>
</body>
<script>

  Vue.config.productionTip = false; // 解决警告信息的

  /*
  
  组件实例的产生过程：
      ① 每次执行step1:时，都会得到一个这个组件对应的VueComponent构造函数
      ② 每次当执行到step3:时，就会把这个VueComponet构造函数给实例化，得到一个实例化对象（组件实例化对象，即组件实例）
      ③ 当前组件的数据，方法等等都会在自己的组件实例上存放

  重要的内置关系：
      需求：此时有组件A、组件B以及组件C，请问如何使这三个组件实例同时具有一个相同属性（如：count=1)
      分析：之前有遇到过类似的问题吗？
      当要给某些实例化对象添加一个共同的方法时，常常在它们的构造函数的原型对象上，添加这个方法，即可让所有的实例化对象同时具有这一个方法

      关键点：由组件实例的产生过程可知，它们都由VueComponent构造函数构造产生，但是这个构造函数是彼此独立的，即A有A的VueComponent构造函数
              B有B的VueComponent构造函数，C有C的VueComponent构造函数

      关键问题：VueComponent.prototype的隐式原型是谁呢？
      答：Vue.prototype

      解决：在Vue.prototype上添加该属性即可使这三个组件实例同时具有一个相同的该属性

      提醒：为了防止Vue.prototype上属性名，与data中的键名重名，建议在属性名前加上一个$



  
  
  
  
  */

  Vue.prototype.$count = 1;

  const Header = Vue.extend({

    name: "Header",
    template: `

        <h1>我是头部</h1>
  
    `,
    mounted(){

      console.log("Header",this.$count);

    }

  });




  const App = Vue.extend({

    name: "App",
    template: `
      <div>
      <h1>App {{message}}</h1>
      <Header></Header>
      </div>
      `,
    data() {

      return {
        message: "hello",
      };
    },

    components: {
      Header,

    },

    mounted() {
      
      console.log("组件实例",this);
      console.log("组件app的构造函数的原型对象的原型对象",this.__proto__.__proto__); //看construct指针
      console.log("组件app的构造函数的原型对象的原型对象再往上",this.__proto__.__proto__.__proto__);// object
      console.log("组件app的构造函数的原型对象的原型对象再往上,再往上",this.__proto__.__proto__.__proto__.__proto__);// 原型链的终点

      console.log("App",this.$count);


    },

  });

  console.log(app);




  const vm = new Vue({
    el: "#app",
    data() {
      return {

      };
    },

    components: {
      App,

    }

  });
</script>


</html>